<template>
  <div :style="{ width: width, height: height, background: background }" style="position: relative">
    <div ref="container" style="width: 100%; height: 100%" />
    <div
      ref="panel"
      style="width: 250px; position: absolute; top: 0; right: 0; overflow-y: auto"
      :style="{ maxHeight: height }"
    />
    <form-design-dialog ref="formDesign" />
  </div>
</template>

<script>
import BpmnModeler from 'bpmn-js/lib/Modeler'
import 'diagram-js/assets/diagram-js.css'
import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import translate from './translate/translate.js'
import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
  CamundaPlatformPropertiesProviderModule
} from 'bpmn-js-properties-panel'
import CamundaBpmnModdle from 'camunda-bpmn-moddle/resources/camunda.json'
import 'bpmn-js-properties-panel/dist/assets/properties-panel.css' // 右边工具栏样式
import ModifyProviderModule from './modify'
import FormPropertiesProviderModule from './extension/form/index.js'
import FormModdleDescriptor from './extension/form/form.json'
import FormDesignDialog from './dialog/FormDesign/index.vue'
export default {
  name: 'Bpmn',
  components: { FormDesignDialog },
  props: {
    height: {
      type: String,
      default: '100%'
    },
    width: {
      type: String,
      default: '100%'
    },
    background: {
      type: String,
      default: '#FFFFFF'
    },
    flowDefineId: {
      type: String,
      required: true
    },
    xml: {
      type: String
    }
  },
  data() {
    return {
      defaultXml:
        '<?xml version="1.0" encoding="UTF-8"?>\n' +
        '<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" targetNamespace="http://bpmn.io/schema/bpmn" id="Definitions_1">\n' +
        '  <bpmn:process id="Process_1" isExecutable="true">\n' +
        '    <bpmn:startEvent id="StartEvent_1"/>\n' +
        '  </bpmn:process>\n' +
        '  <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
        '    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
        '      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">\n' +
        '        <dc:Bounds height="36.0" width="36.0" x="173.0" y="102.0"/>\n' +
        '      </bpmndi:BPMNShape>\n' +
        '    </bpmndi:BPMNPlane>\n' +
        '  </bpmndi:BPMNDiagram>\n' +
        '</bpmn:definitions>'
    }
  },
  mounted() {
    const that = this
    const xml = this.xml ? this.xml : this.defaultXml
    const customTranslateModule = {
      translate: ['value', translate]
    }
    this.bpmnModeler = new BpmnModeler({
      container: that.$refs.container,
      propertiesPanel: {
        parent: that.$refs.panel
      },
      additionalModules: [
        customTranslateModule,
        BpmnPropertiesPanelModule,
        BpmnPropertiesProviderModule,
        ModifyProviderModule,
        CamundaPlatformPropertiesProviderModule,
        FormPropertiesProviderModule
      ],
      moddleExtensions: {
        camunda: CamundaBpmnModdle,
        magic: FormModdleDescriptor
      }
    })
    const bpmnjs = this.bpmnModeler
    const eventBus = bpmnjs.get('eventBus')
    const event = 'skrivet:form'
    eventBus.on(event, function (e) {
      that.onItemClick(e)
    })
    try {
      this.bpmnModeler.importXML(xml)
    } catch (err) {
      console.log('error rendering', err)
    }
  },
  methods: {
    getXml() {
      return this.bpmnModeler.saveXML()
    },
    onItemClick(options) {
      this.$refs.formDesign.open(options.value, this.flowDefineId, (id) => {
        options.callback(id)
      })
    }
  }
}
</script>

<style lang="less">
.bjs-powered-by {
  display: none;
}
.djs-popup-backdrop {
  z-index: 9999;
}
</style>
